import React from 'react';
import Taro from '@tarojs/taro';

import * as T from '../types';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
type IInfoProps = T.IProps & T.IInfoProps;

import { Text, View, Image, Radio } from '@tarojs/components';
import './AddressList.less';
import edit from './img/edit.png'
import def from './img/default.png'
import { AtSwipeAction } from 'taro-ui';


// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
export default class AddressList extends React.Component<Partial<IInfoProps>, T.IInfoState> {

  // 使用state值
  // constructor(props) {
  //   super(props)
  //   this.state={
  //     test:1
  //   }
  // }

  onTap = async (item, e) => {
    const {
      actions: { action },
    } = this.props;
    if (e.text === '设为默认') {
      action.setDefault(item.deliveryAddressId);
    }
    if (e.text === '删除') {
      Taro.showModal({
        content: '确认删除地址信息?',
        success: function (res) {
          if (res.confirm) {
            action.deleteAddress(item.deliveryAddressId);
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        },
        confirmColor: '#218CFF'
      });
    }
  };

  render() {
    let {
      main: { addressList },
      actions: { action },
    } = this.props;

    return (
      <View className="componentAddressList">
        {addressList.map((item, index) => (
          <AtSwipeAction
            key={item.deliveryAddressId}
            onClick={this.onTap.bind(this, item)}
            autoClose={true}
            // onOpened={this.handleSingle.bind(this, item.deliveryAddressId)}
            // isOpened={this.state.openAddress === item.deliveryAddressId}
            // onClosed={() => this.setState({openAddress: ''})}
            autoClose={true}
            options={[
              {
                text: '设为默认',
                style: {
                  width: '80px',
                  padding: 0,
                  margin: 0,
                  background: '#F3F3F3',
                },
                className: 'op1'
              },
              {
                text: '删除',
                style: {
                  width: '80px',
                  margin: 0,
                  background: '#FE3831',
                },
                className: 'op2'
              },
            ]}
          >
            <View style={{ padding: '0 16px' }}>
              <Text className='f14x9' style={{ marginTop: 16 }}>{item.addressInfo}</Text>

              <View className='row ai-c jc-sb' style={{ marginBottom: 8 }}>
                <View style={{ flex: 1, textAlign: 'justify' }}>
                  <Text className='p16x3b'>{item.deliveryAddress}</Text>
                </View>
                <Image
                  className="edit"
                  src={edit}
                  mode="widthFix"
                  onClick={() => {
                    Taro.navigateTo({
                      url: '/pages/package-D/addressEdit/index?id=' + item.deliveryAddressId,
                    })
                  }} />
              </View>

              <View className='row ai-c' style={{ marginBottom: 16 }}>
                <Text className='p14x3' style={{ marginRight: 24 }}>{item.consigneeName}</Text>
                <Text className='p14x3'>{item.consigneeNumber}</Text>
                {!!item.isDefaltAddress && (<Image className="def" src={def} mode="widthFix" />)}
              </View>

              <View className='row ai-c' style={{ marginBottom: 16 }}>
                <Radio
                  color="#1784FC"
                  style={{ textAlign: 'center', marginRight: 2, transform: 'scale(.8)' }}
                  checked={!!item.isDefaltAddress}
                  onClick={() => {
                    action.setDefault(item.deliveryAddressId);
                  }}
                />
                <Text className='p14x6'>设为默认地址</Text>
              </View>

              {index !== addressList.length - 1 && (<View style={{ backgroundColor: '#F5F7FC', width: "100%", height: 1 }} />)}
            </View>
          </AtSwipeAction>
        ))}
      </View>
    );
  }
}
